<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
		<!--[if lt IE 9]><!-->
		<script src="http://code.jquery.com/jquery-1.11.3.min.js "></script>
		<!--<![endif]-->
		<!--[if gte IE 9]><!-->
		<script src="https://code.jquery.com/jquery-3.2.1.min.js "></script>
		<!--<![endif]-->
		<script>
			$(document).ready(function() {
				/*
				 * bind()单击事件
				 * 向某个元素添加多个事件*/
				/*$("p").bind("click", function() {
					alert("这个段落被点击了。");
				});
				$("p").bind("mouseover mouseout", function() {
					$("p").toggleClass("intro");
				});*/
				/*-----------------------------*/
				/*
				 * 事件映射，向被选元素添加事件*/
				/*$("button").bind({
					click: function() {
						$("p").slideToggle();
					},
					mouseover: function() {
						$("body").css("background-color", "#E9E9E4");
					},
					mouseout: function() {
						$("body").css("background-color", "#FFFFFF");
					}
				});*/

			});
			/*-----------------------------*/
			/*
			 * 向函数传递数据*/
			function handlerName(e) {
				alert(e.data.msg);
			}
			$(document).ready(function() {
				$("p").bind("click", {
					msg: "你刚点击了!"
				}, handlerName)
			});
		</script>
		<style type="text/css">
			.intro {
				font-size: 150%;
				color: red;
			}
		</style>
	</head>

	<body>
		<p>点我！</p>
		<button>点我！</button>
	</body>

</html>